<template>
  <div class="box">
    <el-row
      class="tac"
      :router="true"
      default-active="2"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-col :span="12">
        <h3>餐饮系统</h3>
        <el-menu
          :unique-opened="true"
          :router="true"
          default-active="/zong"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="/zong">
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="/cpxl">
            <template #title>
              <span>菜品</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/cplb">菜品类别</el-menu-item>
              <el-menu-item index="/cpda">菜品档案</el-menu-item>
              <el-menu-item index="/cpkw">菜品口味</el-menu-item>
              <el-menu-item index="/gggl">规格管理</el-menu-item>
              <el-menu-item index="/cpdw">菜品单位</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/cpkc">
            <template #title>
              <span>库存</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/cpkc">菜品库存</el-menu-item>
              <el-menu-item index="/cppd">菜品盘点</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <span>促销</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/rmtc">热卖菜品</el-menu-item>
              <el-menu-item index="/cxsp">折扣菜品</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5">
            <template #title>
              <span>订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/ddxx">订单信息</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/cpxs">
            <template slot="title">
              <span>报表</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/cpxs">菜品销售</el-menu-item>
              <el-menu-item index="/syls">收银流水</el-menu-item>
              <el-menu-item index="/cpls">菜品流水</el-menu-item>
              <el-menu-item index="/dpys">店铺营收</el-menu-item>
              <el-menu-item index="/yhsj">用户数据</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="/banner">
            <template slot="title">
              <span>系统</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/banner">banner管理</el-menu-item>
              <el-menu-item index="/mdpz">门店配置</el-menu-item>
              <el-menu-item index="/zwgl">桌位管理</el-menu-item>
              <el-menu-item index="/smpz">扫码配置</el-menu-item>
              <el-menu-item index="/zfpz">支付配置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
    <div class="you">
      <div class="zuo">
        <img
          src="https://img.axureshop.com/0f/8b/81/0f8b816f57904445a872785742132259/images/%E9%A6%96%E9%A1%B5_4/u5474.png"
          alt=""
        />
        <div class="youy">
          <p>
            用户名:<span>{{ list }}</span>
          </p>
          <p>
            用户ID:<span>{{ id }}</span>
          </p>
        </div>
      </div>
      <el-main>
        <router-view />
      </el-main>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: "管理员",
      id: "11111",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped>
.tac {
  width: 200px;
  background-color: rgb(220, 220, 220);
}
.el-col,
.el-menu-item,
.el-submenu__title {
  width: 200px;
}
h3 {
  display: block;
  background-color: rgb(220, 220, 220);
  height: 57px;
  text-align: center;
  line-height: 57px;
}
.box {
  display: flex;
}
.you {
  height: 57px;
  width: 100%;
  background-color: rgb(220, 220, 220);
  margin-left: 1px;
}
img {
  width: 39px;
  height: 39px;
}
.zuo {
  display: flex;
}
</style>